<template>
	<view>
		<uv-steps class="uni-pt-10" :current="step" activeColor="#e09ab5">
			<uv-steps-item v-for="_ in MAX_STEPS"></uv-steps-item>
		</uv-steps>
		<view class="center">
			<template v-if="step == 0">
				<uv-text text="我的宠物被称作"></uv-text>
				<uv-input class="uni-mt-4" placeholder="宠物名称" :maxlength="15" v-model="pet.name" focus>
					<template v-slot:suffix>
						<uv-text type="info" :text="`${pet.name.length}/${15}`"></uv-text>
					</template>
				</uv-input>
				<view class="uni-mt-10" />		
				<uv-text text="TA的种类是"></uv-text>
				<uv-input class="uni-mt-4" placeholder="宠物种类" :maxlength="15" v-model="pet.type">
					<template v-slot:suffix>
						<uv-text type="info" :text="`${pet.type.length}/${15}`"></uv-text>
					</template>
				</uv-input>
				<view class="uni-mt-10" />	
				<view class="row">
					<uv-text text="我记得第一次遇到TA的日子"></uv-text>
					<uv-switch v-model="hasBirthday" active-color="#e09ab5"
						async-change @change="onSwitchBirthday"></uv-switch>
				</view>
				<uv-text v-if="hasBirthday" type="info" mode="date" :text="pet.birthday"></uv-text>
			</template>
			<template v-else-if="step == 1">
				<view class="pet-state">
					<view @click="isPetAlive = !isPetAlive">
						<uv-text align="center" :text="isPetAlive ? '我的宠物仍然' : '我的宠物已经'"></uv-text>
						<uv-text bold size="32" align="center" type="primary" :text="isPetAlive ? '健在' : '逝去'"></uv-text>
						<uv-transition v-if="isPetAlive" show>
							<uv-image class="uni-mt-10" src="/static/common/CartoonCat.png"></uv-image>
						</uv-transition>
						<uv-transition v-else show>
							<uv-image class="uni-mt-10" src="/static/common/Coffin.png"></uv-image>
						</uv-transition>
					</view>
					<view class="uni-mt-4"></view>
					<uv-text text="*点击上方文字/图片切换状态" type="info" size="8" align="center"></uv-text>
					<view v-if="!isPetAlive" class="uni-mt-6">
						<uv-button v-if="!pet.deathday" text="设置纪念日" plain type="primary" 
							@click="deathdayPicker.open()"></uv-button>
						<template v-else>
							<uv-text align="center" bold mode="date" size="18" :text="pet.deathday"></uv-text>
							<view class="uni-mt-4"></view>
							<uv-text class="uni-mt-4" align="center" text="在这一天"></uv-text>
							<uv-text align="center" :text="'我们永远纪念 ' + pet.name"></uv-text>
							<uv-button class="uni-mt-3" size="small" plain 
								text="撤销纪念日" @click="() => pet.deathday = null"></uv-button>
						</template>
					</view>
				</view>
			</template>
			<template v-else-if="step == 2">
				<view v-if="!pet.header" class="upload-header" @click="uploadHeader">
					<uv-icon name="plus" size="64rpx" color="primary"></uv-icon>
					<view>
						<uv-text type="primary" text="点击上传头图" align="center"></uv-text>
					</view>
				</view>
				<template v-else>
					<view class="row">
						<uv-text text="TA的宠物卡片预览:"></uv-text>
						<uv-button plain text="重新选择" size="small" @click="uploadHeader"></uv-button>
					</view>
					<view class="pet-card">
						<pet-card class="uni-mt-4" :pet="pet"></pet-card>
					</view>
					<view v-if="!isPetAlive" class="uni-ml-10">
						<view class="row uni-mt-10">
							<uv-text text="使用黑白照片"></uv-text>
							<uv-switch v-model="pet.use_black_white_header" active-color="#e09ab5"></uv-switch>
						</view>
						<view v-if="pet.deathday" class="row uni-mt-10">
							<uv-text text="显示纪念日"></uv-text>
							<uv-switch v-model="pet.show_deathday" active-color="#e09ab5"></uv-switch>
						</view>
						<view class="row uni-mt-10">
							<uv-text text="显示纪念图标"></uv-text>
							<uv-switch v-model="pet.show_death_icon" active-color="#e09ab5"></uv-switch>
						</view>
					</view>
				</template>
				<view class="uni-mt-10" />
				<view class="row">
					<uv-text text="该档案仅我自己可见"></uv-text>
					<uv-switch v-model="isOnlyOwnerVisible" active-color="#e09ab5"></uv-switch>
				</view>
				<view class="uni-mt-10" />
				<uv-text text="TA的照片墙"></uv-text>
				<view class="photos-list uni-mt-4">
					<uni-file-picker v-model="pet.photos" :limit="8" :image-styles="selecterStyle">
						<uv-icon color="info" size="40rpx" name="camera-fill"></uv-icon>
					</uni-file-picker>
				</view>
			</template>
		</view>
		<view class="bottom">
			<uv-button v-if="step != 0" class="bottom__button" type="info" 
				text="上一步" @click="--step"></uv-button>
			<view v-else class="bottom__button"></view>
			<uv-button v-if="step != MAX_STEPS - 1" class="bottom__button" type="primary" 
				text="下一步" :disabled="!nextStepEnable" @click="++step"></uv-button>
			<uv-button v-else class="bottom__button" type="primary" 
				text="创建" :disabled="!nextStepEnable" @click="createPet"></uv-button>
		</view>
	</view>
	<uv-datetime-picker ref="birthdayPicker" mode="date" confirmColor="#e09ab5"
		v-model="cachedBirthday" @confirm="onSelectBirthday"
		:minDate="0" :max-date="Date.now()">
	</uv-datetime-picker>
	<uv-datetime-picker ref="deathdayPicker" mode="date" confirmColor="#e09ab5"
		v-model="cachedDeathday" @confirm="onSelectDeathday"
		:minDate="pet.birthday || 0" :max-date="Date.now()">
	</uv-datetime-picker>
	<qf-image-cropper v-show="showHeaderCropper" :width="500" :height="250" 
		:src="tempHeaderUrl" @crop="onHeaderCropped"></qf-image-cropper>
</template>

<script lang="ts" setup>
	import { computed, ref } from 'vue'
	import { UniCloudFile } from '@/common/types'
	const step = ref(0)
	const MAX_STEPS = ref(3)
	const pet = ref({
		name: '',
		type: '',
		birthday: null,
		deathday: null,
		header: null,
		photos: [],
		status: 0,
		visibility_status: 0,
		use_black_white_header: false,
		show_deathday: false,
		show_death_icon: false
	})
	const nextStepEnable = computed(() => {
		switch (step.value) {
			case 0:
				return pet.value.name && pet.value.type
			case 1:
				return true
			case 2:
				return pet.value.header
			default:
				return false
		}
	})
	
	const cachedBirthday = ref(Date.now())
	const hasBirthday = computed(() => pet.value.birthday != null)
	const birthdayPicker = ref(null)
	const onSwitchBirthday = (value: boolean) => {
		if (value) {
			birthdayPicker.value.open()
		} else {
			pet.value.birthday = null
		}
	}
	const onSelectBirthday = (rs: any) => {
		pet.value.birthday = rs.value
		if (pet.value.deathday && pet.value.birthday > pet.value.deathday) {
			pet.value.deathday = null
			cachedDeathday.value = Date.now()
		}
	}
	
	const isPetAlive = computed({
		get: () => pet.value.status === 0,
		set: (value: boolean) => {
			pet.value.status = value ? 0 : 1
		}
	})
	const cachedDeathday = ref(Date.now())
	const deathdayPicker = ref(null)
	const onSelectDeathday = (rs: any) => {
		pet.value.deathday = rs.value
	}
	
	const tempHeaderUrl = ref('')
	const showHeaderCropper = ref(false)
	const uploadHeader = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				tempHeaderUrl.value = res.tempFilePaths[0]
				showHeaderCropper.value = true
			}
		})
	}
	const getTempUrl = async (fileId: string) => {
		const res = await uniCloud.getTempFileURL({fileList: [fileId]})
		return res.fileList[0].tempFileURL
	}
	const onHeaderCropped = async (e: any) => {
		uni.showLoading({
			title: '正在上传'
		})
		const res = await uniCloud.uploadFile({
			filePath:  e.tempFilePath,
			cloudPath: 'pet_header/' + new Date().getTime() + '.png',
		})
		pet.value.header = {
			fileId: res.fileID,
			url: await getTempUrl(res.fileID)
		} as UniCloudFile
		uni.hideLoading()
		showHeaderCropper.value = false
	}
	
	const isOnlyOwnerVisible = computed({
		get: () => pet.value.visibility_status === 1,
		set: (value: boolean) => {
			pet.value.visibility_status = value ? 1 : 0
		}
	})
	
	const db = uniCloud.database();
	const createPet = async () => {
		uni.showLoading({
			title: '创建中'
		})
		console.log("创建宠物: " + pet.value);
		await db.collection('pet-pets').add(pet.value)
		uni.hideLoading()
		uni.showToast({
			title: '创建成功',
			icon: 'success'
		})
		uni.navigateBack()
	}
	
	const selecterStyle = {
		height: '160rpx',
		width: '160rpx',
	}
</script>

<style lang="scss" scoped>
	.center {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		margin: 30rpx 50rpx 50rpx 50rpx;
	}
	.bottom {
		display: flex;
		justify-content: space-between;
		margin: 0 35rpx 0 35rpx;
		&__button {
			flex: 1;
			margin: 15rpx;
		}
	}
	.row {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.pet-state {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.upload-header {
		width: 100%;
		height: 200rpx;
		border: 1px dashed $uni-primary;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.pet-card{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.photos-list {
		z-index: 0;
	}
</style>
